<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="handleJump" data-type="BACK">
					<image class="title_bar_left_icon" :src='STATIC_URL+"5.png"'></image>
				</view>
				<view class="title_bar_center">
					搜索结果
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<u-sticky bg-color="#f5f5f5" :offset-top="88+StatusBarRpx" style="width: 100%;">
			<view class="flex align-center justify-between" style="padding: 10rpx 25rpx;background: #f5f5f5;width: 100%;">
				<view class="search_info">
					<image class="search_icon" :src='STATIC_URL+"9.png"' mode="aspectFill"></image>
					<input v-model="keyword" class="search_input" type="text" placeholder="输入商品关键词" placeholder-style="font-size: 26rpx;color: #8B8B8B;" @confirm="getSearch">
				</view>
				<view class="search_text" @tap.stop="getSearch">搜索</view>
			</view>
		</u-sticky>
		
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#41AF36"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<template v-else>
			<view class="shop_list">
				<view class="shop_item flex" v-for="(item, index) in shopList" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/index/goodDetails?id=${item.id}`">
					<view class="item_left_img">
						<u-lazy-load :image="item.image" img-mode="aspectFill" height="180" border-radius="8"></u-lazy-load>
					</view>
					<view class="item_right">
						<view class="shop_name">{{item.name}}</view>
						<view class="specification" v-if="item.specification">规格：{{item.specification}}</view>
						<view class="shop_price flex align-center justify-between">
							<view class="price_text">
								<template v-if="user.is_show_price == 1">
									<text class="price_1">￥</text>
									<text class="price_2">{{item.price}}</text>
									<text class="price_3">/{{filterDictionary(item.unit)}}</text>
								</template>
								<template v-else>
									<text class="price_3">单位：{{filterDictionary(item.unit)}}</text>
								</template>
							</view>
							<view class="shop_num flex align-center justify-end" @tap.stop="changeNum(item)">
								<template v-if="item.count > 0">
									<image :src='STATIC_URL+"19.png"' mode="aspectFill"></image>
									<view class="shop_num_input">{{item.count}}</view>
								</template>
								<image :src='STATIC_URL+"20.png"' mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="noData_other" v-if="shopList.length == 0 && !isShow">
				<image src="/static/empty/no.png"></image>
			</view>
		</template>
		<cart-popup :source="1" ref="cart" :item="shopItemInfo" @changeShop="changeShopInfo"></cart-popup>
	</view>
	
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import cartPopup from "@/components/cartPopup/cartPopup.vue"
	import { mapState } from 'vuex'
	export default {
		components: {
			cartPopup
		},
		data() {
			return {
				keyword: "",
				isShow: true,
				shopList: [],
				shopItemInfo: "",
				user: {},
			};
		},
		onLoad(options) {
			let { keyword } = options;
			if (keyword !== undefined) this.keyword = keyword;
			this.getShopData();
		},
		onShow() {
			this.user = global.userInfo;
		},
		components: {
			cartPopup
		},
		computed: {
			// ...mapState(['cartList'])
		},
		watch: {
		    // 监听vuex中的数据
		  //   cartList(newValue,oldValue) {
				// let cartList = newValue;
				// if (cartList.length > 0) {
				// 	cartList.forEach((v, k) => {
				// 		this.shopList.forEach((v1, k1) => {
				// 			if (v.id == v1.id) {
				// 				v1.count = v.count
				// 			}
				// 		})
				// 	})
				// }
		  //   }
		},
		methods: {
			// 商品列表  glyShopList
			getShopData() {
				this.$api.get(global.apiUrls.glyShopList, {
					product_name: this.keyword
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 200) {
						this.shopList = res.data.data;
						let cartList = this.$store.state.cartList;
						if (cartList.length > 0) {
							cartList.forEach((v, k) => {
								this.shopList.forEach((v1, k1) => {
									if (v.id == v1.id) {
										v1.count = v.count
									}
								})
							})
						}
					} else {
						this.$message.info(res.data.message);
					}
				})
			},
			changeShopInfo(e) {
				let index = this.shopList.findIndex(item => item.id == e.id);
				this.shopList[index].count = e.count;
			},
			changeNum(item) {
				this.shopItemInfo = item;
				let _this = this;
				setTimeout(() => {
					_this.$refs.cart.openCart();
				}, 100)
			},
			filterDictionary(id) {
				let item = global.dictionary.filter(item => item.id == id);
				if (item.length > 0) {
					return item[0].name;
				} else {
					return "未知";
				}
			},
			getSearch() {
				this.isShow = true;
				this.getShopData();
			}
		}
	};
</script>
<style lang="scss" scoped>
	.bar_info {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		position: fixed;
		top: 0rpx;
		background: #f5f5f5;
	
		.title_bar {
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.title_bar_left {
				width: 50rpx;
				.title_bar_left_icon {
					width: 18rpx;
					height: 32rpx;
				}
			}
	
			.title_bar_center {
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 400;
			}
	
			.title_bar_right {
				width: 50rpx;
			}
		}
	}
	.shop_list {
		padding: 0 20rpx;
		margin-top: 20rpx;
		.shop_item {
			background: #fff;
			border-radius: 10rpx;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
			.item_left_img {
				width: 180rpx;
				height: 180rpx;
			}
			/deep/.u-lazy-item {
				width: 180rpx !important;
				height: 180rpx !important;
			}
			.item_right {
				width: calc(100% - 180rpx);
				padding: 0 0 0 30rpx;
				.shop_name {
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				.specification {
					margin-top: 16rpx;
					color: #999;
					font-size: 26rpx;
				}
				.shop_price {
					margin-top: 32rpx;
					.price_text {
						.price_1 {
							color: #D43C3B;
							font-size: 24rpx;
							font-weight: 600;
						}
						.price_2 {
							color: #D43C3B;
							font-size: 40rpx;
							font-weight: 600;
						}
						.price_3 {
							color: #989898;
							font-size: 24rpx;
							font-weight: 500;
						}
					}
					.shop_num {
						image {
							width: 60rpx;
							height: 40rpx;
						}
						.shop_num_input {
							text-align: center;
							margin: 0 16rpx;
							font-weight: 400;
							font-size: 30rpx;
							color: #3D3D3D;
						}
					}
				}
			}
		}
	}
	.search_info {
		// margin: 10rpx 25rpx 0;
		width: 610rpx;
		height: 70rpx;
		background: #fff;
		border-radius: 100rpx;
		position: relative;
		
		.search_icon {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			left: 30rpx;
			top: 20rpx;
		}
		.search_input {
			height: 70rpx;
			display: flex;
			flex: 1;
			padding: 0 32rpx 0 80rpx;
			font-size: 26rpx;
		}
	}
	.search_text {
		font-weight: 400;
		font-size: 30rpx;
		color: #41AF36;
	}
	.search_flex_2 {
		background: #fff;
		// margin: 0rpx 105rpx 0rpx 105rpx;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		padding: 40rpx 0rpx 0rpx 0rpx;
	}

	.search_fd2_2_c1 {
		background: transparent;
		line-height: 90rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: #41AF36;
		width: 269rpx;
		height: 90rpx;
	}

	.search_fd2_2_c0 {
		border-right: 1px solid #EEEEEE;
		background: transparent;
		line-height: 90rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: #999;
		height: 90rpx;
		width: 270rpx;
	}

	.search_fd2_2 {
		border-top: 1px solid #eee;
	}

	.search_fd2_1 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin: 48rpx 0rpx 60rpx 0rpx;
	}

	.search_fd2_0 {
		color: #333333;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 45rpx;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #f5f5f5;
		background-size: 100% auto;
	}

	.searchMall_flex_0 {
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.searchMall_fd0_0_c1_c1 {
		margin: 0rpx 0rpx 0rpx 16rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
		width: 100%;
	}

	.searchMall_fd0_0_c1_c0 {
		width: 32rpx;
		height: 32rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.searchMall_fd0_0_c1 {
		background: #f8f8f8;
		background-size: 100% auto !important;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		width: 436rpx;
		height: 64rpx;
		margin: 0rpx 0rpx 0rpx 24rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;
	}

	.searchMall_fd0_0_c0 {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	.searchMall_fd0_0 {
		padding: 0 32rpx;
	}

	.searchMall_flex_1 {
		background: #FFFFFF;
		padding: 0rpx 0rpx 0rpx 0rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.searchMall_fd1_2 {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin: 0rpx 0rpx 32rpx 30rpx;
	}

	.searchMall_fd1_1_c0_c1 {
		width: 18rpx;
		height: 18rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.searchMall_fd1_1_c0_c0 {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		// margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.searchMall_fd1_1_c0 {
		background: #F5F5F5;
		border-radius: 50rpx;
		padding: 6rpx 30rpx;
		margin: 0rpx 12rpx 20rpx 12rpx;
	}

	.searchMall_fd1_1 {
		padding: 0rpx 0rpx 0rpx 18rpx;
	}

	.searchMall_fd1_0_c1 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.searchMall_fd1_0_c0 {
		font-weight: 500;
		font-size: 34rpx;
		color: #3D3D3D;
	}

	.searchMall_fd1_0 {
		padding: 40rpx 0rpx 24rpx 0rpx;
		margin: 0rpx 30rpx 0rpx 30rpx;
	}

	.searchMall_fd2_0_c0_c2_c1_c0 {
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 400;
	}

	.searchMall_fd2_0_c0_c2_c1 {
		background: url(https://www.guochaoxiaoju.com/uploads/mini/694.png) no-repeat;
		height: 71rpx;
		width: 191rpx;
		margin: 0rpx 0rpx 0rpx 16rpx;
		background-size: 100% auto;
	}

	.searchMall_fd2_0_c0_c2_c0_c0 {
		color: #796446;
		font-size: 34rpx;
		font-weight: 400;
	}

	.searchMall_fd2_0_c0_c2_c0 {
		background: url(https://www.guochaoxiaoju.com/uploads/mini/693.png) no-repeat;
		height: 71rpx;
		width: 191rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
		background-size: 100% auto;
	}

	.searchMall_fd2_0_c0_c2 {
		margin: 0rpx 0rpx 70rpx 0rpx;
	}

	.searchMall_fd2_0_c0_c1 {
		line-height: 44rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin: 40rpx 0rpx 71rpx 0rpx;
		text-align: center;
	}

	.searchMall_fd2_0_c0_c0 {
		color: #333333;
		font-size: 40rpx;
		font-weight: 400;
		margin: 190rpx 0rpx 0rpx 0rpx;
	}

	.searchMall_fd2_0 {
		background: url(https://www.guochaoxiaoju.com/uploads/mini/692.png) no-repeat;
		width: 580rpx;
		background-size: 100% auto;
	}

	.searchMall_fd3_1_c0_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.searchMall_fd3_1_c0 {
		background: #F7F6F4;
		margin: 0rpx 0rpx 32rpx 0rpx;
		border-radius: 35rpx;
		padding: 12rpx 32rpx 12rpx 32rpx;
		margin-right: 24rpx;
	}

	.searchMall_fd3_1 {
		width: 687rpx;
		margin: 0rpx auto 0rpx auto;
	}

	.searchMall_fd3_0_c0 {
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(51, 51, 51, 1);
	}

	.searchMall_fd3_0 {
		padding: 32rpx 0rpx 15rpx 0rpx;
		margin: 0rpx 30rpx 32rpx 30rpx;
	}

	.searchMall_fd4_1_c0_c1_c2_c2 {
		color: #999999;
		font-size: 24rpx;
		font-weight: 400;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		max-width: 110rpx;
		margin: 0rpx 0rpx 0rpx auto;
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
	}

	.searchMall_price2_fd4_1_c0_c1_c2_c1 {
		font-size: 22rpx;
	}

	.searchMall_price1_fd4_1_c0_c1_c2_c1 {
		font-size: 34rpx;
	}

	.searchMall_fd4_1_c0_c1_c2_c1 {
		color: rgba(173, 56, 35, 1);
		font-weight: 600;
	}

	.searchMall_fd4_1_c0_c1_c2_c0 {
		color: rgba(173, 56, 35, 1);
		font-weight: 700;
		font-size: 24rpx;
	}

	.searchMall_fd4_1_c0_c1_c1 {
		color: #999999;
		font-size: 22rpx;
		font-weight: 400;
		margin: 0rpx 0rpx 12rpx 0rpx;
		text-decoration: line-through;
	}

	.searchMall_fd4_1_c0_c1_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
		padding: 20rpx 0rpx 20rpx 0rpx;
		line-height: 40rpx;
	}

	.searchMall_fd4_1_c0_c1 {
		padding: 0rpx 20rpx 0rpx 20rpx;
	}

	.searchMall_fd4_1_c0_c0 {
		width: 335rpx;
		height: 350rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.searchMall_fd4_1_c0 {
		background: #FFFFFF;
		padding: 0rpx 0rpx 24rpx 0rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		box-shadow: 0rpx 3rpx 16rpx 1rpx rgba(0, 0, 0, 0.1);
	}

	.searchMall_fd4_1 {

		width: 100%;
		padding: 0 24rpx;
	}

	.searchMall_fd4_0_c0 {
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(51, 51, 51, 1);
	}

	.searchMall_fd4_0 {
		padding: 32rpx 0rpx 15rpx 0rpx;
		margin: 0rpx 30rpx 16rpx 30rpx;
	}

	::v-deep .mallPage_fd1_0_c4_c1_c0 {
		box-shadow: 0 0 10rpx 1rpx #eee;
	}
</style>